import React, { useState } from 'react';
import axios from 'axios';
import './MotionDrive.css';

const MotionDrive = () => {
  const [selectedImage, setSelectedImage] = useState(null);
  const [selectedVideo, setSelectedVideo] = useState(null);
  const [processedVideo, setProcessedVideo] = useState(null);
  const [imagePreview, setImagePreview] = useState(null);
  const [videoPreview, setVideoPreview] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      setSelectedImage(file);
      setImagePreview(URL.createObjectURL(file));
      setError(null);
    }
  };

  const handleVideoChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      setSelectedVideo(file);
      setVideoPreview(URL.createObjectURL(file));
      setError(null);
    }
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!selectedImage || !selectedVideo) {
      setError('请选择图像和视频文件');
      return;
    }

    setLoading(true);
    setError(null);
    const formData = new FormData();
    formData.append('image', selectedImage);
    formData.append('video', selectedVideo);

    try {
      const response = await axios.post('http://localhost:5000/motion-drive', formData);
      const { video_url } = response.data;
      setProcessedVideo(`http://localhost:5000${video_url}`);
    } catch (error) {
      setError('处理视频时发生错误，请重试');
      console.error('Error processing video:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    setSelectedImage(null);
    setSelectedVideo(null);
    setProcessedVideo(null);
    setImagePreview(null);
    setVideoPreview(null);
    setError(null);
  };

  return (
    <div className="motion-drive-container">
      <div className="motion-drive-content">
        <h1 className="title">图像动作驱动</h1>
        <p className="subtitle">
          上传一张图像和一个视频，我们将为您生成动作驱动的视频
        </p>

        {error && (
          <div className="error-message">
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit}>
          <div className="upload-section">
            <h2>选择图像</h2>
            <label className="upload-button">
              <span>选择图像</span>
              <input
                type="file"
                accept="image/*"
                onChange={handleImageChange}
              />
            </label>
            
            {imagePreview && (
              <div className="preview-section">
                <h3>图像预览</h3>
                <img src={imagePreview} alt="图像预览" />
              </div>
            )}
          </div>

          <div className="upload-section">
            <h2>选择视频</h2>
            <label className="upload-button">
              <span>选择视频</span>
              <input
                type="file"
                accept="video/*"
                onChange={handleVideoChange}
              />
            </label>
            
            {videoPreview && (
              <div className="preview-section">
                <h3>视频预览</h3>
                <video src={videoPreview} controls />
              </div>
            )}
          </div>

          <div className="button-group">
            <button
              type="submit"
              className="submit-button"
              disabled={loading || !selectedImage || !selectedVideo}
            >
              {loading ? '处理中...' : '生成运动视频'}
            </button>
            <button
              type="button"
              className="reset-button"
              onClick={handleReset}
            >
              重置
            </button>
          </div>
        </form>

        {processedVideo && (
          <div className="result-section">
            <h2>处理后的运动视频</h2>
            <div className="result-video-container">
              <video src={processedVideo} controls />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default MotionDrive;
